<template>
	<view class="ring" v-if="JSON.stringify(charts)!='{}'">
		<view class="title-wrapper">
			<view class="title" v-if="charts.title.name!=undefined">{{charts.title.name}}</view>
			<view class="btns" v-if="JSON.stringify(charts.title.btns)!='[]'">
				<view v-for="(btn, btnindex) in charts.title.btns" :key="btnindex">
					<view @click="select(btn.btnName,btnindex)" class="btn" :class="{'active':myselectType===btn.btnName}">{{btn.btnName}}</view>
				</view>
			</view>
		</view>
		<view class="tab-wrapper" v-if="JSON.stringify(charts.tab)!='[]'">
			<view v-for="(tab,tabindex) in charts.tab" :key="tabindex">
				<view @click="selectTab(tab.tabName)" class="tab-item" :class="{'active':myselectTab===tab.tabName}">{{tab.tabName}}</view>
			</view>
		</view>
		<view class="subtitle" v-if="JSON.stringify(charts.subtitle)!='{}'">
			<view class="title">{{charts.subtitle.name}}</view>
			<view class="text">{{charts.subtitle.value}}</view>
		</view>
		<view class="content-wrapper" v-if="JSON.stringify(charts.chartdata.series)!='[]'">
			<view v-for="(item,index) in charts.chartdata.series" :key="index">
				<view class="content-item">
					<view class="left">{{item.name}}</view>
					<view class="right">{{item.value}}</view>
				</view>
			</view>
		</view>
		<view class="bottom" @click="navito" v-if="charts.bottom.name!=undefined">{{charts.bottom.name}}</view>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	const app = getApp().globalData;
	export default{
		data(){
			return{
				myselectType:'',
				myselectTab:'',
				charts:{},
				btnindex:0,
				injsontemp:''
			}
		},
		
		props:{
			
			charttype:{
				type: String
			},
			injson:{
				type:String,
			},
			style:{
				type:Object
			}
		},
		
		mounted: function(options) {
			this.injsontemp = this.injson
			var injson = JSON.parse(this.injsontemp)
			// console.log(injson.replaceConditions)
			this.myselectType = injson.replaceConditions['#search1#']
			this.myselectTab = injson.replaceConditions['#search2#']
			this.uploaddata()
		},
		
		methods:{
			navito(){
				// var that = this
				// var charts = that.charts
				// console.log(charts)
				// var clicked = charts.bottom.clicked
				// var modcode = clicked.modcode
				// var title = clicked.title
				// var pagename = clicked.pagename
				// var gsdm = uni.getStorageSync('gsdm')
				// var templetname = clicked.templetname
				// var headerconditions = {"btntype":that.myselectType,"tabtype":that.myselectTab}
				// var typeindex = that.btnindex
				// if(templetname=='appsj_tab'){
				// 	uni.navigateTo({url:'/pages/tab/tab?modcode='+modcode+'&title='+title+'&pagename='+pagename+'&gsdm='+gsdm+'&typeindex='+typeindex})
				// }else if (templetname=='appsj_list'){
				// 	uni.navigateTo({url:'/pages/infolist/infolist?modcode='+modcode+'&title='+title+'&pagename='+pagename+'&gsdm='+gsdm+'&headerconditions='+JSON.stringify(headerconditions)})
				// }
			},
			
			select(type,index){
				var injson = JSON.parse(this.injsontemp)
				injson.replaceConditions['#search1#'] = type
				this.myselectType = type
				this.injsontemp = JSON.stringify(injson)
				this.uploaddata()
			},
			selectTab(type){
				var injson = JSON.parse(this.injsontemp)
				injson.replaceConditions['#search2#'] = type
				this.myselectTab = type
				this.injsontemp = JSON.stringify(injson)
				this.uploaddata()
			},
			
			uploaddata(){
				var that = this
				var style =that.style
				uni.request({
				 	url: getApp().globalData.app_address + '?method=saas_PageDivData&parse=json',
				 	data: that.injsontemp,
				 	method: 'POST',
				 	header: { 'content-type': 'application/x-www-form-urlencoded' },
				 	success: function(res) {
				 		var result = res.data;
						var charts = {}
						var title = {}
						title['name'] = style.title
						title['btns'] =style.dateBtns
						charts['title'] = title
						charts['tab'] = style.tab
						charts['charttype'] = "rating"
						var chartdata = {}
						chartdata['categories'] = []
						chartdata['series'] = result.data.div.value
						charts['chartdata'] = chartdata
						that.charts = charts
					},
				})
				
			}
		}
	}
</script>

<style>
	.ring{}
	.ring .title-wrapper{display:flex;flex-direction: row;justify-content: space-between;padding: 5px 10px;background: #fff;}
	.ring .title-wrapper .title{align-items: center;color: rgb(7,17,27);font-size: 16px;;}
	.ring .title-wrapper .btns{display: flex;flex-direction: row;align-items: center;}
	.ring .title-wrapper .btns .btn{padding: 2px 10px;font-size: 12px;border-radius: 2px; background: #fff;color: #666666;border: 1px solid #DDDDDD;}
	.ring .title-wrapper .btns .btn.active{padding: 2px 10px;font-size: 12px;border-radius: 2px; background: #F0AD4E;color: #fff;}
	.ring .tab-wrapper{display: flex;flex-direction: row;padding: 10px 50px;justify-content: space-around;background-color: #fefefe;}
	.ring .tab-wrapper .tab-item{color: #666666;}
	.ring .tab-wrapper .tab-item.active{color: #F0AD4E;border-bottom: solid 1px #F0AD4E;}
	.ring .subtitle{display: flex;flex-direction: row;padding: 5px 10px;justify-content: space-between;background-color: #fafafa;}
	.ring .content-wrapper{display: flex;flex-direction: column; background-color: #fff;border-top: 1px solid rgba(7,17,27,0.1);border-bottom: 1px solid rgba(7,17,27,0.1);}
	.ring .content-wrapper .content-item{display: flex;flex-direction: row;justify-content: space-between;padding: 10px;}
	.ring .content-wrapper .content-item .left{font-size: 14px;color: rgb(7, 17, 27);}
	.ring .content-wrapper .content-item .right{font-size: 14px;color: rgb(7, 17, 27);}
	.ring .bottom{display: flex;padding: 10px; justify-content: center;align-items: center;color: rgba(7,17,27,0.5);background-color: #fff;}
</style>
